<template>
  <div class="service">
    <Theme :theme="theme"></Theme>
    <div class="content">
      <img src="../../assets/lsc/service.jpg" alt="" class="content_left" />
      <div class="issue">
        <p>
          H～智能客服小鹿很高兴为您服务~您可以通过输入框描述问题，小鹿也猜—猜~
        </p>

        <van-divider
          :style="{
            borderColor: 'gray',
            margin: '5px 0',
          }"
        >
        </van-divider>
        <h4>您可能想问</h4>
        <ul class="questions">
          <li v-for="(v, i) in questions" :key="i" @click="add(i)">
            {{ v.title }}
          </li>
        </ul>
      </div>
    </div>
    <div class="my">
      <p>1.查询门店信息</p>
      <img src="../../assets/lsc/service.jpg" alt="" class="content_left" />
    </div>
    <div class="service_bottom">
      <input type="text" placeholder="请输入反馈" />
      <span>按钮</span>
    </div>
  </div>
</template>

<script>
import Theme from "../../components/lsc/theme.vue";

export default {
  components: { Theme },
  methods: {
    add(i) {
      console.log(i);
    },
  },
  data() {
    return {
      theme: "在线客服",

      questions: [
        {
          title: "1.查询门店信息",
        },
        {
          title: "2.配送员位置及联系方式",
        },
        { title: "3.关于建行8.8元优惠购活动" },
        { title: "4.充4赠3活动如何参与" },
        { title: "5.关于瑞幸自由卡" },
      ],
    };
  },
};
</script>

<style scoped>
.service {
  width: 100%;
  min-height: 6.4rem;
  background-color: #efeff4;
}
/deep/.van-nav-bar {
  background-color: #f5f5f5;
}
/deep/.van-nav-bar .van-icon {
  color: gray;
}
.content {
  margin: 0.45rem 0 0 0.06rem;
  display: flex;
}
.content_left {
  width: 0.5rem;
  height: 0.5rem;
}
.content .issue {
  width: 2.6rem;
  padding: 0.1rem;
  background-color: #fff;
  border-radius: 0.24rem;
  border-top-left-radius: 0;
}
.issue p {
  line-height: 0.22rem;
  font-size: 0.14rem;
}
.issue h4 {
  font-size: 0.14rem;
}
.questions li {
  font-size: 0.14rem;
  color: #3f79d4;
  margin: 0.1rem 0;
}

.questions li:before {
  content: "";
  width: 0.02rem;
  height: 0.02rem;
  display: inline-block;
  border-radius: 50%;
  background: #4f8eff;
  vertical-align: middle;
  margin-right: 0.14rem;
}
.service_bottom {
  width: 100%;
  height: 0.5rem;
  line-height: 0.5rem;
  background-color: #f5f5f5;
  position: fixed;
  bottom: 0;
  display: flex;
}
.service_bottom input {
  width: 2.6rem;
  height: 0.3rem;
  border-radius: 0.3rem;
  outline: none;
  border: 0.01rem solid #ccc;
  margin: 0.1rem 0 0.1rem 0.1rem;
  text-indent: 1em;
}
.service_bottom span {
  display: inline-block;
  width: 0.6rem;
  height: 0.3rem;
  line-height: 0.3rem;
  text-align: center;
  margin: 0.1rem 0 0.1rem 0.1rem;
  border-radius: 0.2rem;
  color: #fff;
  background-color: #3f79d4;
}
.my {
  margin-top: 0.3rem;
  float: right;
  display: flex;
}
.my p {
  display: inline-block;
  padding: 0 0.1rem;
  height: 0.5rem;
  line-height: 0.5rem;
  color: #fff;
  margin: 0.16rem 0.1rem 0 0;
  background-color: #3f79d4;
  border-radius: 0.24rem;
  border-top-right-radius: 0;
}
</style>
